<!DOCTYPE html>

<html lang="en-us"><head>
  <meta charset="utf-8">
  <title>书法的气韵生动</title>
  <script src="./js/axios.js"></script>
  <script src="js/vue.js"></script>

  <!-- mobile responsive meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="This is meta description">
  <meta name="generator" content="Hugo 0.74.3" />

  <!-- plugins -->
  
  <link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="plugins/themify-icons/themify-icons.css">
  <link rel="stylesheet" href="plugins/slick/slick.css">

  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="css/style.css" media="screen">

  <!--Favicon-->
  <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
  <link rel="icon" href="images/favicon.png" type="image/x-icon">

  <meta property="og:title" content="Reader | Hugo Personal Blog Template" />
  <meta property="og:description" content="This is meta description" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="" />
  <meta property="og:updated_time" content="2020-03-15T15:40:24+06:00" />
</head>
<body>
 <!-- navigation -->
 <!-- navigation -->
 <!-- navigation -->
 <header class="navigation">
  <div class="container" id="index">
    <nav class="navbar navbar-expand-lg navbar-white">
      <a class="navbar-brand order-1" href="index.html">
        <img class="img-fluid" width="50px" src="images/图标.png"
          alt="中国传统文化论坛">
      </a>
      <div class="collapse navbar-collapse text-center order-lg-2 order-3" id="navigation">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">首页</a>
          </li>
          <li class="nav-item @@about__active">
            <a class="nav-link" href="BBS_index.html">论坛</a>
          </li>
          <li class="nav-item @@services__active">
            <a class="nav-link" href="chat.html">消息</a>
          </li>
          <li class="nav-item @@services__active">
            <a class="nav-link" href="shop.html">商店</a>
          </li>
        </ul>
      </div>
      <div class="order-2 order-lg-3 d-flex align-items-center">
        <form @submit.prevent="performSearch"> <!-- 阻止表单提交 -->
          <input 
            id="search-query" 
            name="s" 
            type="search" 
            placeholder="输入文章ID"
            v-model="searchId" 
          >
          <button type="submit" class="btn btn-search">搜索</button>
        </form>
        <button class="navbar-toggler border-0 order-1" type="button" data-toggle="collapse" data-target="#navigation">
          <i class="ti-menu"></i>
        </button>
        <ul class="navbar-nav ml-auto" v-if="userid==null">
          <li class="nav-item @@login__active">
              <a class="nav-link" href="Login.html">登录</a>
          </li>
          <li class="nav-item @@register__active">
              <a class="nav-link" href="register.html">注册</a>
          </li>
      </ul>
      <ul class="navbar-nav ml-auto 1ogined" v-else>
          <li class="nav-item @@login__active">
            <span><a class="nav-link" href="person-post.html">{{userid}}</a></span>
          </li>
          <li class="nav-item @@register__active">
              <span v-on:click.prevent="logout"><a class="nav-link" href="BBS_index.html">注销</a></span>
          </li>
      </ul>
      </div>
    </nav>
  </div>
</header>


  <!--引导程序-->
  <script src="js/jquery-3.3.1.min.js"></script> 
  <script src="js/bootstrap.min.js"></script>
  <!--/MENU-JS-->
  <script>
      new Vue({
        el: "#index",
        data: {
          userid: localStorage["userid"],
          searchId: '' // 用于存储搜索的ID
        },
        methods: {
          logout: function() {
            localStorage.clear();
            this.userid = null;
          },
          performSearch: function() {
            if (!this.searchId || this.searchId.trim() === '') {
              // 如果为空，跳转到404页面
              alert("请输入文章id");
              return;
            }
            // 存储搜索ID到localStorage
            localStorage.setItem("num", this.searchId);
            // 跳转到post.html
            location.href = "post.html";
          }
        }
      })
  </script>
<!-- /navigation -->


<section class="section-ad">
  <div class="container" id="newpost">
    <div class="row justify-content-center">
      <div class=" col-lg-9   mb-5 mb-lg-0">
        <div class="container mt-5">
          <h1 class="h2">请编写文章</h1>
  
          <!-- 标题输入框 -->
          <div class="mb-3">
              <h1 class="h4" >输入标题</h1>
              <input type="text" class="form-control" id="title-input"  v-model="posttitle" placeholder="请输入标题">
          </div>
  
          <div className="mb-3">
            <h1 class="h4" >选择TAG</h1>
            <div className="space-x-4">
              <div className="inline-flex items-center">
                <input 
                  className="form-radio" 
                  type="radio" 
                  id="category1" 
                  name="category" 
                  value="1"
                  v-model="select"
                />
                <label className="ml-2" htmlFor="category1">文化艺术</label>
              </div>
              
              <div className="inline-flex items-center">
                <input 
                  className="form-radio" 
                  type="radio" 
                  id="category2" 
                  name="category" 
                  value="2"
                  v-model="select"
                />
                <label className="ml-2" htmlFor="category2">生活习俗</label>
              </div>
              
              <div className="inline-flex items-center">
                <input 
                  className="form-radio" 
                  type="radio" 
                  id="category3" 
                  name="category" 
                  value="3"
                  v-model="select"
                />
                <label className="ml-2" htmlFor="category3">哲学思想</label>
              </div>
              
              <div className="inline-flex items-center">
                <input 
                  className="form-radio" 
                  type="radio" 
                  id="category4" 
                  name="category" 
                  value="4"
                  v-model="select"
                />
                <label className="ml-2" htmlFor="category4">精神价值</label>
              </div>
              
              <div className="inline-flex items-center">
                <input 
                  className="form-radio" 
                  type="radio" 
                  id="category5" 
                  name="category" 
                  value="5"
                  v-model="select"
                />
                <label className="ml-2" htmlFor="category5">工艺技艺</label>
              </div>
              
              <div className="inline-flex items-center">
                <input 
                  className="form-radio" 
                  type="radio" 
                  id="category6" 
                  name="category" 
                  value="6"
                  v-model="select"
                />
                <label className="ml-2" htmlFor="category6">文学经典</label>
              </div>
            </div>
          </div>
          <!-- 正文输入框 -->
          <div class="mb-3">
            <h1 class="h4">请写入正文</h1>
              <textarea class="form-control" id="content-textarea" rows="10" v-model="posttext" placeholder="请输入正文内容"></textarea>
          </div>
  
          <!-- 提交按钮 -->
          <div class="mb-3 text-center">
            <a href="person-post.html"><button id="submit-btn" class="btn btn-primary" v-on:click.prevent="putpost">提交</button></a>
          </div>
      </div>
    </div>
  </div>
</section>

<script>
        var vm = new Vue({
        el:"#newpost",
        data:{
            userid:localStorage["userid"],
            posttitle:"",
            select:"",
            posttext:""
        },
        methods:{
            logout:function(){
                localStorage.clear();
                this.userid=null;
            },
            putpost:function(){
                var topictype = this.select=="1"?"文化艺术":this.select=="2"?"生活习俗":this.select=="3"?"哲学思想":this.select=="4"?"精神价值":this.select=="5"?"工艺技艺":"文学经典";
                axios.post("https://localhost:7071/api/Post",
                {
                    userId:this.userid,
                    text:this.posttext,
                    title:this.posttitle,
                    topicType:topictype,
                    postType:"普通"
                }).then(function(res){
                    console.log(res);
                    // 判断响应值是否为 -1
                    if (res.data === -1) {
                      // 弹窗提示用户被禁言
                      alert("您被禁言，无法发表文章");
                    } 
                    location.href = "person-post.html";
                })

            }
        }
        
    })
</script>



<footer class="footer">
  <svg class="footer-border" height="214" viewBox="0 0 2204 214" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2203 213C2136.58 157.994 1942.77 -33.1996 1633.1 53.0486C1414.13 114.038 1200.92 188.208 967.765 118.127C820.12 73.7483 263.977 -143.754 0.999958 158.899"
      stroke-width="2" />
  </svg>
  <div class="container">
      <div class="row align-items-center">
      <div class="col-md-5 text-center text-md-left mb-4">
          <ul class="list-inline footer-list mb-0">
            <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
          </ul>
      </div>
      <div class="col-md-2 text-center mb-4">
          <a href="index.html"><img class="img-fluid" width="100px" src="images/图标.png" alt="Reader | Hugo Personal Blog Template"></a>
      </div>
      <div class="col-12">
          <div class="border-bottom border-default"></div>
      </div>
      </div>
  </div>
  </footer>


  <!-- JS Plugins -->
  <script src="plugins/jQuery/jquery.min.js"></script>

  <script src="plugins/bootstrap/bootstrap.js"></script>

  <script src="plugins/slick/slick.min.js"></script>

  <script src="plugins/instafeed/instafeed.min.js"></script>


  <!-- Main Script -->
  <script src="js/script.js"></script></body>
</html>